<template>
  <div class="commission-item-list">
    <commissionItemCell @commissionItemClick="commissionItemClick(item)"
                        v-if="commissionRowList.length" v-for="(itemList, rowIdx) in commissionRowList" v-bind:key="rowIdx" :itemList="itemList"></commissionItemCell>
  </div>
</template>
<script>

let grouping = require('../include/grouping')
let urlPath = require('../include/url-path')
let paddingValue = [0, 12]
module.exports = {
  components: {
    coupon: require('./coupon.vue'),
    commissionItemCell: require('./commission-item-cell.vue')
  },
  props: {
    commissionItemList: {default: []},
    column: {default: 2}
  },

  data () {
    return {
      iosHide: weex.config.env.platform.toLowerCase() === 'ios',
      itemWidth: 0,
      commissionRowList: []
    }
  },
  created () {
    this.handle()
    this.itemWidth = (750 - paddingValue[this.column - 1]) / this.column
    this.$watch('commissionItemList', (newVal, oldVal) => {
      this.handle()
    })
  },
  methods: {
    handle () {
      var idx = 0
      this.commissionRowList = grouping(this.commissionItemList, this.column, (item) => {
        item.$_platformIcon = urlPath.assets('images/icon/platform/' + item.ecomPlat + '.png')
        item.$_idx = idx++
      })
    },
    commissionItemClick (item) {
      this.$emit('commissionItemClick', item)
    }
  }
}
</script>
<style lang="scss">

</style>
